<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/21
  Time: 2:12 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>mac首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/boot/plugins1/layui-v2.6.5/layui/css/layui.css">
    <link rel="stylesheet" href="/boot/plugins1/bootstrap/css/bootstrap.min.css">
    <style>

        .footer-left ul {
            padding: 0px;
            margin-top: 2em;
        }
        .footer-left h5 {
            color: #fff;
            font-size: 17px;
            font-weight: 300;
            line-height: 1.5em;
            letter-spacing: 2px;
            width: 80%;
            margin: 32px 0px 22px 0px;
        }
        .footer-left p {
            margin: 18px 0px;
            color: #fff;
            font-size: 17px;
            letter-spacing: 2px;
        }
        .footer-left p a {
            color: #debe64;
        }
        .footer-left p {
            margin: 18px 0px;
            color: #fff;
            font-size: 17px;
            letter-spacing: 2px;
        }
        .footer-right span input[type="text"] {
            display: inline-block;
            outline: none;
            padding: 15px 10px;
            width: 72.8%;
            border: 0;
            -webkit-appearance: none;
            background: #F6F4F5;
            font-family: 'Exo', sans-serif;
            font-size: 15px;
            color: #b3825a;
            font-weight: 400;
            letter-spacing: 2px;
        }
        .footer-text p {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 2px;
        }
        .footer-right span input[type="submit"] {
            border: 0;
            padding: 15px 12px;
            background: #55acee;
            color: #fff;
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
            font-family: 'Exo', sans-serif;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 2px;
        }
        .b1{

            background-color: #f9f2f4;
        }
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }
        .pp{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .p1{
            width: 20%;
            margin-right:auto

        }
        .p2{
            width: 20%;
            margin-left:auto;
            margin-top :-468px;

        }
        .lbt{
            width: 60%;

            margin: 0 auto;
        }
        .footer {
            /* background: url(../images/footer-banner.png) no-repeat; */
            background-color: #262626;
            background-size: 100% 100%;
            /* min-height: 580px; */
        }
    </style>
</head>
<body class="b1">

<%--<%@include file="../nav/nav.jsp"%>--%>

<div style="width: 100%">

    <div class="p1" >

        <img src="/boot/imgs/11.jpg" style="margin-top: -20px">

    </div>
    <div class="lbt" style="margin-top: -468px">

        <div id="myCarousel" class="carousel slide" >
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/boot/imgs/l1.jpeg" style="width: 100% ;height: 468px" alt="First slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/l2.jpeg"  style="width: 100% ;height: 468px" alt="Second slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/l3.jpeg"  style="width: 100% ;height: 468px" alt="Third slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/l4.jpeg" style="width: 100% ;height: 468px" alt="Third slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/l5.jpeg" style="width: 100% ;height: 468px" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
            <%--        &rsaquo;--%>
        </div>
    </div>
    <div class="p2" >

        <img src="/boot/imgs/11.jpg">

    </div>

</div>
<hr>
<%--    //搜索框--%>
<p></p>
<p></p>
<p></p>
<%--<div class="container" style="margin-top: 20px">--%>
<%--    <div>--%>
<%--        <form class="bs-example bs-example-form" role="form">--%>
<%--            <div class="row">--%>
<%--                <div class="col-md-offset-2 col-md-8">--%>
<%--                    <div class="input-group">--%>
<%--                        <input placeholder="请输入产品名称进行查询" id="searchName" name="searchName" value="${searchName}" type="text" class="form-control" style="border: 1px solid orange">--%>
<%--                        <span class="input-group-btn">--%>
<%--                                <button class="btn btn-default" style="width: 120px;background-color: orangered;color: white" type="button" onclick="search_product()" ><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</button>--%>

<%--                            </span>--%>
<%--                    </div><!-- /input-group -->--%>
<%--                </div><!-- /.col-lg-6 -->--%>
<%--            </div><!-- /.row -->--%>
<%--        </form>--%>
<%--    </div>--%>

<%--    <c:if test="${count!=null}">--%>
<%--        <div id="moreDiv" style="border: 0px dashed orangered;border-radius: 10px;padding-top: 15px;box-sizing: border-box" >--%>
<%--            <span class="text-danger"></span>--%>
<%--            <form role="form">--%>
<%--                <div class="row">--%>
<%--                    <div class="col-md-offset-2 col-md-3">--%>
<%--                        <div class="form-group">--%>
<%--                            <select id="select_type" onchange="search_by_type(this)" class="form-control">--%>
<%--                                <option value="-1">===产品类型===</option>--%>
<%--                                <c:forEach items="${typeList}" var="t">--%>
<%--                                    <option <c:if test="${typeId==t.id}">selected</c:if>  value="${t.id}">${t.name}</option>--%>
<%--                                </c:forEach>--%>
<%--                            </select>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                    <div class="col-md-6">--%>
<%--                        <label>最小价格</label><input id="min_price" value="${minPrice}" onblur="min_price(this)" style="width: 30%;display: inline" type="number" class="form-control">--%>
<%--                        <label>- 最大价格</label><input style="width: 30%;display: inline" type="number" class="form-control">--%>
<%--                    </div>--%>

<%--                </div>--%>

<%--            </form>--%>
<%--        </div>--%>
<%--    </c:if>--%>
<%--</div>--%>
<p></p>
<p></p>
<p></p>
<hr>
<%--    //缩略图--%>
<div class="container-fluid" style="margin-top: 20px">
    <div class="row">


        <c:forEach items="${carBrands}" var="b">
            <c:if test="${c.brId == b.id}">${b.brName}</c:if>
        </c:forEach>

        <c:forEach items="${carStyles}" var="s">
            <c:if test="${c.stId == s.id}"> <p class="mb-0"><small>${s.stName}</small></p></c:if>
        </c:forEach>

        <c:forEach items="${pageInfo.list}" var="p">
            <div class="col-md-4">
                <div class="thumbnail">
<%--                    <img src="http://localhost:80/product/${p.cPhoto}"--%>
                <img src="http://localhost:80/car/${p.cPhoto}"

                         alt="通用的占位符缩略图" style="margin-left: 15px;margin-top: 10px">
                    <div class="caption">

<%--            <c:forEach items="${carBrands}" var="b">--%>
<%--                <c:if test="${c.brId == b.id}">${b.brName}</c:if>--%>
<%--            </c:forEach>--%>





                        <p style="color: red"> <c:forEach items="${carBrands}" var="b" >
                            <c:if test="${p.brId == b.id}">${b.brName}</c:if>
                        </c:forEach><span class="text-primary">库存:${p.cAge}</span></p>
                        <p class="text-info">销量:${p.cPrice+10000} </p>
<%--                        <c:if test="${user!=null}">--%>
<%--                            <p><span onclick="addCarts(${p.id})" class="text-danger glyphicon glyphicon-shopping-cart"></span>&nbsp;--%>
<%--                                <span class="glyphicon glyphicon-hand-left"></span>点击加入购物车</p>--%>

<%--                        </c:if>--%>

<%--                        <c:if test="${user!=null}">--%>

<%--                            <span class="glyphicon glyphicon-heart-empty"  onclick="collect(${p.id})" ></span>--%>
<%--                        </c:if>--%>

<%--                        --%>
<%--                        <c:if test="${user!=null&&user.power==0}">--%>
<%--                            <span class="glyphicon glyphicon-heart" onclick="del(${p.id})"></span>--%>
<%--                            <span class="glyphicon glyphicon-apple" onclick="addp()"></span>--%>
<%--                        </c:if>--%>


                        <p class="pp">
                             11111111
                        </p>

                    </div>

                </div>
            </div>

        </c:forEach>


                    <hr>
    </div>
</div>
<p></p>
<div class="container" style="text-align: center">
    <ul class="pagination">
        <c:if test="${pageInfo.pageNum>1}">
            <li><a href="javascript:nextPage(${pageInfo.pageNum-1})">&laquo;</a></li>
        </c:if>

        <c:if test="${pageInfo.pageNum<=1}">
            <li class="disabled"><a>&laquo;</a></li>
        </c:if>


        <c:set var="start" value="${pageInfo.pageNum}"></c:set>

        <c:if test="${pageInfo.pageNum+2<=pageInfo.pages}">
            <c:set var="end" value="${pageInfo.pageNum+2}"></c:set>
        </c:if>

        <c:if test="${pageInfo.pageNum+2>pageInfo.pages}">
            <c:set var="start" value="${pageInfo.pages-2}"></c:set>
            <c:set var="end" value="${pageInfo.pages}"></c:set>
        </c:if>


        <c:forEach begin="${start<=0?1:start}" end="${end}" var="n">
            <c:if test="${pageInfo.pageNum==n}">
                <li class="active"><a href="javascript:nextPage(${n})">${n}</a></li>
            </c:if>
            <c:if test="${pageInfo.pageNum!=n}">
                <li><a href="javascript:nextPage(${n})">${n}</a></li>
            </c:if>
        </c:forEach>

        <c:if test="${pageInfo.pageNum<pageInfo.pages}">
            <li><a href="javascript:nextPage(${pageInfo.pageNum+1})">&raquo;</a></li>
        </c:if>

        <c:if test="${pageInfo.pageNum>=pageInfo.pages}">
            <li class="disabled"><a>&raquo;</a></li>
        </c:if>


        <li><a>当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>
    </ul>
</div>
<hr>
<p></p>
<p></p>
<div style="width: 100%;">

    <img src="/boot/imgs/0003.jpg" style="width: 95%;height: 410px;margin-left: 50px; opacity: 0.9" >
</div>

<hr>
<hr>
<%--<c:if test="${user!=null}">--%>
<%--    <div class="container1">--%>

<%--        <div class="row">--%>
<%--            <div class="col-xs-3" id="myScrollspy" >--%>
<%--                <ul class="nav nav-tabs nav-stacked" id="myNav">--%>
<%--                    <li><a href="/mac/login/carts/index">购物车</a></li>--%>
<%--                    <li><a href="/mac/login/collect/index">我的收藏</a></li>--%>
<%--                    <li><a href="#section-4">旅游景点</a></li>--%>
<%--                    <li><a href="#section-5">联系我们</a></li>--%>
<%--                </ul>--%>
<%--            </div>--%>
<%--            <div class="col-xs-9">--%>


<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</c:if>--%>


<div class="footer">-
    <div class="container">
        <div class="footer-main">
            <div class="col-md-5 footer-left">
                <h5 style="margin-left: 10px">联系我们</h5>
                <ul>
                    <li><a href="#"><span class="twt"> </span></a></li>
                    <li><a href="#"><span class="fb"> </span></a></li>
                    <li><a href="#"><span class="p"> </span></a></li>
                    <li><a href="#"><span class="yt"> </span></a></li>
                    <li><a href="#"><span class="in"> </span></a></li>
                </ul>
                <p>官方电话  +86 15861459716</p>
                <p>官方邮箱 <a href="1849730314@email.com"> 1849730314@email.com</a></p>
                <h5>地址 无锡市锡山区安镇安国东路XXX号</h5>


            </div>

            <div class="col-md-7 footer-right" style="margin-top: 90px;">


                  <span>
					<input type="text"  value="请在这里留下您的宝贵建议" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请在这里留下您的宝贵建议';}">
						<input type="submit" value="提交">
				</span>

            </div>
            <p></p>
            <p></p>

            &lt;%&ndash;<div class="clearfix"> </div>&ndash;%&gt;
        </div>
        <div class="footer-text" style="margin-left: 430px;margin-top: 20px;">
            <p >&nbsp;&nbsp;&nbsp;Copyright &copy; 2021-12-31 忠诚服务每一位旅行者</p>
        </div>
    </div>

</div>

<script src="/boot/plugins1/bootstrap/js/bootstrap.min.js"></script>

<script src="/boot/js/jquery.js"></script>
<script src="/boot/js/bootstrap.min.js"></script>
<script>
    function nextPage(pageNow){
        // let value = document.getElementById("searchName").value;
        // let select_type = document.getElementById("select_type");
        // let typeId="-1"
        // let minPrice="0";
        //
        // if(select_type!=null){
        //     typeId = select_type.value;
        // }
        //
        // let min_price = document.getElementById("min_price");
        // if(min_price!=null){
        //     minPrice = min_price.value;
        // }
        window.location="/boot/car/index03?pageNow="+pageNow;
            // +"&searchName="+value+"&typeId="+typeId+"&count=1&minPrice="+minPrice;
    }

    $(document).ready(function(){
        $("#myNav").affix({
            offset: {
                top: 125
            }
        });
    });
    function addp() {
        window.location="/mac/product/add";

    }
    // function del(pid) {
    //
    //     $.post('/mac/admin/del',{"pid":pid},function (data) {
    //         console.log(data)
    //         if(data.code == "200")
    //         {
    //             alert("删除成功")
    //             window.location="/mac/product/index";
    //         }
    //         else
    //         {
    //             alert("删除失败")
    //         }
    //
    //     })
    //     // alert("删除成功");
    //
    // }
    //
    // function collect(pid) {
    //
    //     $.post('/mac/login/collect/add',{"pid":pid},function (data) {
    //         console.log(data)
    //         if(data.code=="200")
    //         {
    //             alert("收藏成功");
    //         }
    //         else
    //         {
    //             alert("收藏失败");
    //         }
    //
    //     })
    //
    // }
    // function addCarts(pid){
    //     $.post('/mac/login/carts/add',{"pid":pid},function(data){
    //         console.log(data);
    //         if(data.code=="200"){
    //             // alert("1111");
    //             alert("加入购物车成功");
    //         }
    //     })
    // }

    <%--function search_product(){--%>
    <%--    let searchName = document.getElementById("searchName").value;--%>
    <%--    window.location="/mac/product/index?searchName="+searchName+"&count=1";--%>
    <%--}--%>

    <%--function search_by_type(obj){--%>
    <%--    let searchName = document.getElementById("searchName").value;--%>
    <%--    window.location="/mac/product/index?searchName="+searchName+"&typeId="+obj.value+"&count=1";--%>
    <%--}--%>

    <%--function min_price(obj){--%>
    <%--    let searchName = document.getElementById("searchName").value;--%>
    <%--    let typeId = document.getElementById("select_type").value;--%>
    <%--    window.location="/mac/product/index?searchName="+searchName+"&typeId="+typeId+"&count=1&minPrice="+obj.value;--%>
    <%--}--%>

    <%--$(function(){--%>
    <%--    let login = ${login==null?"0":"1"};--%>

    <%--    if(login=="1"){--%>
    <%--        let login_a = document.getElementById("login_a");--%>
    <%--        login_a.click();--%>
    <%--    }--%>
    <%--});--%>

</script>
</body>
</html>
